<template>
  <div class="role-selector">
    <div class="role-selector-content">
      <!-- 角色选择器 -->
      <div class="role-select-wrapper">
        <el-select
          :model-value="aiChatStore.activeRole.id"
          @change="handleRoleChange"
          placeholder="选择AI角色"
          size="default"
          style="width: 200px"
          popper-class="role-select-dropdown"
          :fit-input-width="false"
        >
          <el-option-group
            v-for="category in groupedRoles"
            :key="category.category"
            :label="category.label"
          >
            <el-option
              v-for="role in category.roles"
              :key="role.id"
              :label="role.name"
              :value="role.id"
            >
              <div class="role-option">
                <div class="role-info">
                  <span class="role-name">{{ role.name }}</span>
                  <span class="role-desc">{{ role.description }}</span>
                </div>
              </div>
            </el-option>
          </el-option-group>
        </el-select>
      </div>

      <!-- 角色描述 -->
      <div class="role-description">
        <div class="role-details">
          <span class="role-name">{{ aiChatStore.activeRole.name }}</span>
          <span class="role-desc">{{ aiChatStore.activeRole.description }}</span>
        </div>
      </div>

    </div>

    <!-- 自定义角色弹窗 -->
    <RoleCustomDialog
      v-model="showCustomDialog"
      @role-created="handleRoleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, MoreFilled, Setting, Download, Upload } from '@element-plus/icons-vue'
import { useAIChatStore } from '@/stores/aiChatStore'
import { ROLE_CATEGORIES } from '@/types/aiRole'
import RoleCustomDialog from './RoleCustomDialog.vue'

const aiChatStore = useAIChatStore()

// 响应式数据
const showCustomDialog = ref(false)

// 计算属性 - 按分类分组的角色
const groupedRoles = computed(() => {
  const groups = ROLE_CATEGORIES.map(category => ({
    category: category.id,
    label: category.name,
    roles: aiChatStore.allRoles.filter(role => role.category === category.id)
  }))
  
  return groups.filter(group => group.roles.length > 0)
})

// 方法
const handleRoleChange = (roleId: string) => {
  aiChatStore.switchRole(roleId)
}

const handleMenuCommand = (command: string) => {
  switch (command) {
    case 'manage':
      // TODO: 打开角色管理弹窗
      ElMessage.info('角色管理功能开发中...')
      break
    case 'export':
      // TODO: 导出角色配置
      ElMessage.info('导出功能开发中...')
      break
    case 'import':
      // TODO: 导入角色配置
      ElMessage.info('导入功能开发中...')
      break
  }
}

const handleRoleCreated = (role: any) => {
  // 角色创建成功后自动切换到新角色
  aiChatStore.switchRole(role.id)
}
</script>

<style>
/* 全局样式 - 修复角色选择器下拉框 */
.role-select-dropdown {
  min-width: 320px !important;
  max-width: 400px !important;
}

.role-select-dropdown .el-select-dropdown__item {
  height: auto !important;
  min-height: 50px !important;
  padding: 10px 12px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}

.role-select-dropdown .el-select-group__title {
  padding: 8px 12px 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--el-text-color-secondary) !important;
}

.role-select-dropdown .el-select-group__wrap:not(:last-of-type)::after {
  display: none !important;
}

.role-select-dropdown .el-scrollbar__view {
  padding: 4px 0 !important;
}

/* 确保下拉框有足够的最大高度 */
.role-select-dropdown .el-select-dropdown__wrap {
  max-height: 300px !important;
}
</style>

<style scoped>
.role-selector {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
  padding: 6px 16px;
}

.role-selector-content {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.role-select-wrapper {
  flex-shrink: 0;
}

.role-description {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.role-avatar-large {
  font-size: 20px;
  flex-shrink: 0;
}

.role-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.role-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
  font-size: 14px;
}

.role-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 下拉选项样式 */
.role-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 2px 0;
}

.role-avatar {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.role-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.role-info .role-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--el-text-color-primary);
}

.role-info .role-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.3;
  word-wrap: break-word;
  white-space: normal;
  max-width: 280px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .role-selector-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .role-select-wrapper {
    width: 100%;
  }
  
  .role-select-wrapper .el-select {
    width: 100% !important;
  }
  
  .role-description {
    justify-content: center;
  }
  
  .role-actions {
    justify-content: center;
  }
}

/* 深色模式适配 */
html.dark .role-selector {
  background: var(--el-bg-color-page);
  border-bottom-color: var(--el-border-color-dark);
}
</style>
